<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="../../Public/css/mui.min.css">
    <link rel="stylesheet" href="../../Public/css/swiper.min.css">
    <link rel="stylesheet" href="../../Public/fonts/iconfont.css">
    <link rel="stylesheet" href="../../Public/css/global.css">
    <link rel="stylesheet" href="../css/livestu.css">
</head>
<body>
<div class="scroll-tab scroll-bar">
    <ul class="tab-nav">
        <li class="tn-active">首页</li>
        <li>语文</li>
        <li>数学</li>
        <li>英语</li>
        <li>政治</li>
        <li>历史</li>
        <li>地理</li>
        <li>物理</li>
        <li>化学</li>
        <li>生物</li>
    </ul>
</div>
<div class="mui-content index-content">
    <div class="tab-content tc-active">
        <div class="swiper-container" id="bannerSwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="http://resources-user-image.vxue360.com/1ecd80e32faae5df80c3b9329136ec60.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="http://resources-user-image.vxue360.com/78d8e17cdf4b543626a8fafc22ceae11.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="http://resources-user-image.vxue360.com/1ecd80e32faae5df80c3b9329136ec60.jpg" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <ul class="mui-table-view index-menu clearfix">
            <li class="memu-cell">
                <a href="list.html">
                    <p style="background:#FFC001;"><i class="iconfont icon-zhibojianhoutai"></i></p>
                    <div class="mui-media-body">限时免费</div>
                </a>
            </li>
            <li class="memu-cell">
                <a href="list.html">
                    <p style="background:#FB4D4E;"><i class="iconfont icon-shouyi"></i></p>
                    <div class="mui-media-body">低价专区</div>
                </a>
            </li>
            <li class="memu-cell">
                <a href="sort_list.html">
                    <p style="background:#4AD85E;"><i class="iconfont icon-paihang"></i></p>
                    <div class="mui-media-body">排行榜</div>
                </a>
            </li>
            <li class="memu-cell">
                <a href="prime_list.html">
                    <p style="background:#D47DF2;"><i class="iconfont icon-icon"></i></p>
                    <div class="mui-media-body">精品内容</div>
                </a>
            </li>
        </ul>
        <h5 class="rec-top m-t">
            <span class="text-15 bl-red color-333">热门直播教室</span>
            <p class="mui-pull-right">
                <a href="javascript:;" class="iconfont icon-huanyihuan color-999 changes"></a>
            </p>
        </h5>
        <ul class="mui-table-view mui-grid-view slideScreen hot-ul" data-screen="0" id="slideScreen">
            <li class="mui-table-view-cell mui-col-xs-3">
                <a href="room_index.html">
                    <img class="mui-media-object" src="http://img5.imgtn.bdimg.com/it/u=4079384686,3997373627&fm=27&gp=0.jpg">
                    <div class="mui-media-body text-14">高考一轮复习圈</div>
                    <p class="text-mini m-t-3">1.2w关注</p>
                </a>
            </li>
            <li class="mui-table-view-cell mui-col-xs-3">
                <a href="room_index.html">
                    <img class="mui-media-object" src="http://img0.imgtn.bdimg.com/it/u=3637404049,2821183587&fm=27&gp=0.jpg">
                    <div class="mui-media-body text-14">
                        最美文精美语段阅读圈
                    </div>
                    <p class="text-mini m-t-3">1.2w关注</p>
                </a>
            </li>
            <li class="mui-table-view-cell mui-col-xs-3">
                <a href="room_index.html">
                    <img class="mui-media-object" src="http://img3.imgtn.bdimg.com/it/u=1755039712,1084909715&fm=27&gp=0.jpg">
                    <div class="mui-media-body text-14">
                        高考英语学习圈
                    </div>
                    <p class="text-mini m-t-3">1.2w关注</p>
                </a>
            </li>
            <li class="mui-table-view-cell mui-col-xs-3">
                <a href="room_index.html">
                    <img class="mui-media-object" src="http://img3.imgtn.bdimg.com/it/u=2559254547,1157556732&fm=27&gp=0.jpg">
                    <div class="mui-media-body text-14">
                        解题能力提升圈
                    </div>
                    <p class="text-mini m-t-3">1.2w关注</p>
                </a>
            </li>
        </ul>
        <a class="color-999 bg-whtie text-14 get-more" href="#">查看更多</a>
        <h5 class="rec-top m-t">
            <span class="text-15 bl-warnning color-333">每日精选</span>
            <p class="mui-pull-right">
                <a href="javascript:;" class="iconfont icon-huanyihuan color-999 changes"></a>
            </p>
        </h5>
        <ul class="mui-table-view hot-cell slideScreen" data-screen="0">
            <li class="mui-table-view-cell mui-media">
                <a href="set_detail.html">
                    <img class="mui-media-object mui-pull-left lazy" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                    <div class="mui-media-body">
                        <p class="mui-ellipsis-2 text-14 color-333">
                            匀变速直线运动的速度与时间的关系·基础知识4条
                        </p>
                        <p class="mui-ellipsis text-13 p-t-sm color-666">
                            主讲刘老师 | 共7节课
                        </p>
                        <p class="mui-ellipsis p-t-3 text-mini color-999">
                            12.2w次学习
                        </p>
                        <span class="r-pos text-14 color-red">￥28.00</span>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="single_detail.html">
                    <img class="mui-media-object mui-pull-left lazy" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                    <div class="mui-media-body">
                        <p class="mui-ellipsis-2 text-14 color-333">
                            匀变速直线运动的速度与时间的关系·基础知识4条
                        </p>
                        <p class="mui-ellipsis text-13 p-t-sm color-666">
                            主讲刘老师 | 共7节课
                        </p>
                        <p class="mui-ellipsis p-t-3 text-mini color-999">
                            12.2w次学习
                        </p>
                        <span class="r-pos text-14 color-green">免费</span>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img class="mui-media-object mui-pull-left lazy" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                    <div class="mui-media-body">
                        <p class="mui-ellipsis-2 text-14 color-333">
                            匀变速直线运动的速度与时间的关系·基础知识4条
                        </p>
                        <p class="mui-ellipsis text-13 p-t-sm color-666">
                            主讲刘老师 | 共7节课
                        </p>
                        <p class="mui-ellipsis p-t-3 text-mini color-999">
                            12.2w次学习
                        </p>
                        <span class="r-pos text-14 color-green">免费</span>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img class="mui-media-object mui-pull-left lazy" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                    <div class="mui-media-body">
                        <p class="mui-ellipsis-2 text-14 color-333">
                            匀变速直线运动的速度与时间的关系·基础知识4条
                        </p>
                        <p class="mui-ellipsis text-13 p-t-sm color-666">
                            主讲刘老师 | 共7节课
                        </p>
                        <p class="mui-ellipsis p-t-3 text-mini color-999">
                            12.2w次学习
                        </p>
                        <span class="r-pos text-14 color-green">免费</span>
                    </div>
                </a>
            </li>
        </ul>
        <h5 class="mui-text-center linetitle text-15 m-t m-b">精品直播</h5>
        <ul class="mui-table-view mui-grid-view prime-ul slideScreen" data-screen="0">
            <li class="mui-table-view-cell mui-col-xs-6">
                <a href="#">
                    <img class="mui-media-object pad-t5" src="http://resources-user-image.vxue360.com/e85abd220ad5c5adc385dd370f7d97fc.jpg">
                    <p class="mui-ellipsis text-14 color-333">
                        高考英语一轮增值课高考英语一轮增值课高考英语一轮增值课
                    </p>
                    <p class="color-999 mui-ellipsis text-13 mui-text-left">09月17日 17:00-19:00</p>
                    <p class="color-999 mui-ellipsis p-t-sm">
                        <span class="mui-pull-left text-14 color-red">￥28.00</span>
                        <span class="mui-pull-right text-mini color-999">12万次学习</span>
                    </p>
                </a>
            </li>
            <li class="mui-table-view-cell mui-col-xs-6">
                <a href="#">
                    <img class="mui-media-object pad-t5" src="http://resources-user-image.vxue360.com/e85abd220ad5c5adc385dd370f7d97fc.jpg">
                    <p class="mui-ellipsis text-14 color-333">
                        高考英语一轮增值课高考英语一轮增值课高考英语一轮增值课
                    </p>
                    <p class="color-999 mui-ellipsis text-13 mui-text-left">09月17日 17:00-19:00</p>
                    <p class="color-999 mui-ellipsis p-t-sm">
                        <span class="mui-pull-left text-14 color-red">￥28.00</span>
                        <span class="mui-pull-right text-mini color-999">12万次学习</span>
                    </p>
                </a>
            </li>
            <li class="mui-table-view-cell mui-col-xs-6">
                <a href="#">
                    <img class="mui-media-object pad-t5" src="http://resources-user-image.vxue360.com/e85abd220ad5c5adc385dd370f7d97fc.jpg">
                    <p class="mui-ellipsis text-14 color-333">
                        高考英语一轮增值课高考英语一轮增值课高考英语一轮增值课
                    </p>
                    <p class="color-999 mui-ellipsis text-13 mui-text-left">09月17日 17:00-19:00</p>
                    <p class="color-999 mui-ellipsis p-t-sm">
                        <span class="mui-pull-left text-14 color-green">免费</span>
                        <span class="mui-pull-right text-mini color-999">12万次学习</span>
                    </p>
                </a>
            </li>
            <li class="mui-table-view-cell mui-col-xs-6">
                <a href="#">
                    <img class="mui-media-object pad-t5" src="http://resources-user-image.vxue360.com/e85abd220ad5c5adc385dd370f7d97fc.jpg">
                    <p class="mui-ellipsis text-14 color-333">
                        高考英语一轮增值课高考英语一轮增值课高考英语一轮增值课
                    </p>
                    <p class="color-999 mui-ellipsis text-13 mui-text-left">09月17日 17:00-19:00</p>
                    <p class="color-999 mui-ellipsis p-t-sm">
                        <span class="mui-pull-left text-14 color-green">免费</span>
                        <span class="mui-pull-right text-mini color-999">12万次学习</span>
                    </p>
                </a>
            </li>
        </ul>
        <div class="dropDown text-14 color-999">没有更多数据了</div>
    </div>
    <div class="tab-content">
        <h5 class="rec-top">
            <span class="text-15 bl-red color-333">热门直播教室</span>
            <p class="mui-pull-right">
                <a href="javascript:;" class="iconfont icon-huanyihuan color-999 changes"></a>
            </p>
        </h5>
        <ul class="mui-table-view mui-grid-view slideScreen hot-ul" data-screen="0" id="slideScreen">
            <li class="mui-table-view-cell mui-col-xs-3">
                <a href="#">
                    <img class="mui-media-object" src="http://img5.imgtn.bdimg.com/it/u=4079384686,3997373627&fm=27&gp=0.jpg">
                    <div class="mui-media-body text-14">高考一轮复习圈</div>
                    <p class="text-mini m-t-3">1.2w关注</p>
                </a>
            </li>
            <li class="mui-table-view-cell mui-col-xs-3">
                <a href="#">
                    <img class="mui-media-object" src="http://img0.imgtn.bdimg.com/it/u=3637404049,2821183587&fm=27&gp=0.jpg">
                    <div class="mui-media-body text-14">
                        最美文精美语段阅读圈
                    </div>
                    <p class="text-mini m-t-3">1.2w关注</p>
                </a>
            </li>
            <li class="mui-table-view-cell mui-col-xs-3">
                <a href="#">
                    <img class="mui-media-object" src="http://img3.imgtn.bdimg.com/it/u=1755039712,1084909715&fm=27&gp=0.jpg">
                    <div class="mui-media-body text-14">
                        高考英语学习圈
                    </div>
                    <p class="text-mini m-t-3">1.2w关注</p>
                </a>
            </li>
            <li class="mui-table-view-cell mui-col-xs-3">
                <a href="#">
                    <img class="mui-media-object" src="http://img3.imgtn.bdimg.com/it/u=2559254547,1157556732&fm=27&gp=0.jpg">
                    <div class="mui-media-body text-14">
                        解题能力提升圈
                    </div>
                    <p class="text-mini m-t-3">1.2w关注</p>
                </a>
            </li>
        </ul>
        <a class="color-999 bg-whtie text-14 get-more" href="#">查看更多</a>
        <h5 class="mui-text-center linetitle text-15 m-t m-b">精品直播</h5>
        <ul class="mui-table-view hot-cell">
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img class="mui-media-object mui-pull-left lazy" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                    <div class="mui-media-body">
                        <p class="mui-ellipsis-2 text-14 color-333">
                            匀变速直线运动的速度与时间的关系·基础知识4条
                        </p>
                        <p class="mui-ellipsis text-13 p-t-sm color-666">
                            主讲刘老师 | 共7节课
                        </p>
                        <p class="mui-ellipsis p-t-3 text-mini color-999">
                            12.2w次学习
                        </p>
                        <span class="r-pos text-14 color-red">￥28.00</span>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img class="mui-media-object mui-pull-left lazy" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                    <div class="mui-media-body">
                        <p class="mui-ellipsis-2 text-14 color-333">
                            匀变速直线运动的速
                        </p>
                        <p class="mui-ellipsis text-13 p-t-sm color-666">
                            主讲刘老师 | 共7节课
                        </p>
                        <p class="mui-ellipsis p-t-3 text-mini color-999">
                            12.2w次学习
                        </p>
                        <span class="r-pos text-14 color-green">免费</span>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img class="mui-media-object mui-pull-left lazy" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                    <div class="mui-media-body">
                        <p class="mui-ellipsis-2 text-14 color-333">
                            匀变速直线运动的速度与时间的关系·基础知识4条
                        </p>
                        <p class="mui-ellipsis text-13 p-t-sm color-666">
                            主讲刘老师 | 共7节课
                        </p>
                        <p class="mui-ellipsis p-t-3 text-mini color-999">
                            12.2w次学习
                        </p>
                        <span class="r-pos text-14 color-green">免费</span>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img class="mui-media-object mui-pull-left lazy" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                    <div class="mui-media-body">
                        <p class="mui-ellipsis-2 text-14 color-333">
                            匀变速直线运动的速度与时间的关系·基础知识4条
                        </p>
                        <p class="mui-ellipsis text-13 p-t-sm color-666">
                            主讲刘老师 | 共7节课
                        </p>
                        <p class="mui-ellipsis p-t-3 text-mini color-999">
                            12.2w次学习
                        </p>
                        <span class="r-pos text-14 color-green">免费</span>
                    </div>
                </a>
            </li>
        </ul>
        <div class="dropDown text-14 color-999">没有更多数据了</div>
    </div>
    <div class="tab-content">数学</div>
    <div class="tab-content">英语</div>
    <div class="tab-content">政治</div>
    <div class="tab-content">历史</div>
    <div class="tab-content">地理</div>
    <div class="tab-content">物理</div>
    <div class="tab-content">化学</div>
    <div class="tab-content">生物</div>
</div>
<div class="mui-bar mui-bar-tab mui-live-tab">
    <a href="javascript:void(0);" class="mui-tab-item mui-active">
        <span class="iconfont icon-shouye"></span>
        <span class="mui-tab-label mui-block text-mini">首页</span>
    </a>
    <a href="dynamic.html" class="mui-tab-item">
        <span class="iconfont icon-dongtai"></span>
        <span class="mui-tab-label mui-block text-mini">动态</span>
    </a>
    <a href="purchased.html" class="mui-tab-item">
        <span class="iconfont icon-zhuanlandingyue"></span>
        <span class="mui-tab-label mui-block text-mini">已购</span>
    </a>
    <a href="usercenter.html" class="mui-tab-item">
        <span class="iconfont icon-wode"></span>
        <span class="mui-tab-label mui-block text-mini">我的</span>
    </a>
</div>
</body>
<script src="../../Public/libs/jquery-3.2.1.min.js" charset="utf-8"></script>
<script src="../../Public/libs/mui.min.js" charset="utf-8"></script>
<script src="../../Public/libs/swiper-3.4.2.min.js" charset="utf-8"></script>
<script type="text/javascript">
    mui('.mui-bar-tab').on('tap','a',function(){
        location.href = this.getAttribute('href');
    })
    var mySwiper = new Swiper ('#bannerSwiper', {
        autoplay: 3500,
        loop: true,
        pagination: '.swiper-pagination'
    })
    $(function(){
        $('.tab-nav li').on('click',function(){
            var $this = $(this);
            if($this.hasClass('tn-active')){
                return false;
            }else{
                var ind = $this.index();
                var li_width = $this.width();
                var win_width = $(window).width();
                var o_left = $this.offset().left;
                if(o_left < (win_width - li_width)/2){
                    var num = 0 - li_width;
                    $(".tab-nav").scrollLeft(num);
                }else if(o_left > (win_width - li_width)/2){
                    var num = li_width;
                    $(".tab-nav").scrollLeft(num);
                }
                $this.siblings('li').removeClass('tn-active');
                $this.addClass('tn-active');
                $('.tab-content').removeClass('tc-active').eq(ind).addClass('tc-active');
            }
        })
    })
</script>
</html>
